<template>
    <div class="user">
        <i class="iconfont icon-nav-17"></i>
        用户
    </div>
    <div ref="target" class="container">
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import echarts from "echarts"
var data = ref([
    { timeStr: "2022-02-1", income: "55.5", expense: "16.1" },
    { timeStr: "2022-02-2", income: "35.5", expense: "26.1" },
    { timeStr: "2022-02-3", income: "46.5", expense: "23.1" },
    { timeStr: "2022-02-4", income: "37.5", expense: "5.1" },
    { timeStr: "2022-02-5", income: "51.5", expense: "9.1" },
    { timeStr: "2022-02-6", income: "32.5", expense: "1.1" },
    { timeStr: "2022-02-7", income: "49.5", expense: "37.1" },
    { timeStr: "2022-02-8", income: "12.5", expense: "31.1" },
    { timeStr: "2022-02-9", income: "63.5", expense: "32.1" },
    { timeStr: "2022-02-10", income: "23.5", expense: "72.1" },
    { timeStr: "2022-02-11", income: "23.5", expense: "72.1" },
    { timeStr: "2022-02-12", income: "55.5", expense: "26.1" },
    { timeStr: "2022-02-13", income: "46.5", expense: "23.1" },
    { timeStr: "2022-02-14", income: "37.5", expense: "5.1" },
    { timeStr: "2022-02-15", income: "51.5", expense: "9.1" },
    { timeStr: "2022-02-16", income: "32.5", expense: "1.1" },
    { timeStr: "2022-02-17", income: "49.5", expense: "77.1" },
    { timeStr: "2022-02-18", income: "52.5", expense: "51.1" },
    { timeStr: "2022-02-19", income: "63.5", expense: "52.1" },
    { timeStr: "2022-02-20", income: "31.5", expense: "51.1" },
    { timeStr: "2022-02-21", income: "63.5", expense: "74.1" },
    { timeStr: "2022-02-22", income: "66.5", expense: "76.1" },
    { timeStr: "2022-02-23", income: "74.5", expense: "7.1" },
    { timeStr: "2022-02-24", income: "41.5", expense: "3.1" },
    { timeStr: "2022-02-25", income: "32.5", expense: "2.1" },
    { timeStr: "2022-02-26", income: "33.5", expense: "57.1" },
    { timeStr: "2022-02-27", income: "21.5", expense: "54.1" },
    { timeStr: "2022-02-28", income: "12.5", expense: "52.1" },
    { timeStr: "2022-02-29", income: "62.5", expense: "59.1" },
    { timeStr: "2022-02-30", income: "41.5", expense: "53.1" },
]);


const target = ref(null)
let mChart
onMounted(() => {
    mChart = echarts.init(target.value, 'light');
    renderChart()
})

const renderChart = () => {
    var option = {
        // title: {
        //     text: "销售信息"
        // },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "cross",
                crossStyle: {
                    color: "blue"
                }
            }
        },
        legend: {
            data: ["订单数"],


        },
        xAxis: {
            data: data.value.map((item) => item.timeStr),
        },
        yAxis: {
        },
        series: [
            {
                name: '订单数',
                type: 'line',
                color: '#6EC6D0',
                smooth: true,//平滑
                data: data.value.map((item) => item.expense),
                areaStyle: {}
            },
        ],

    }
    mChart.setOption(option);
}

</script>

<style lang="scss" scoped>
.container {
    height: 286px;
    padding-top: 20px;
}

.user {
    padding: 12px 8px;
    border-bottom: 1px solid #f0eaea;
}
</style>